<div nz-row [nzGutter]="24" class="pt-lg">
  <ng-template ngFor let-item [ngForOf]="recordsOverview">
    <div nz-col nzXs="24" nzSm="12" nzMd="" nzLg="6">
      <g2-card [title]="item.text" [bordered]="true" [total]="'¥ ' + item.overview.surplus" contentHeight="46" [action]="action">
        <ng-template #action>
          <i nz-tooltip [nzTooltipTitle]="item.text + '结余'" nz-icon nzType="info-circle"></i>
        </ng-template>
        <div class="d-flex justify-content-between text-truncate">
          <span>支出: {{ item.overview.expense }}</span>
          <span class="pl-sm">收入: {{ item.overview.income }}</span>
        </div>
      </g2-card>
    </div>
  </ng-template>
</div>

<div nz-row [nzGutter]="24">
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="16">
    <nz-card [nzLoading]="recordsAnalysisLoading" nzTitle="日支出曲线" [nzBordered]="false" class="mb-0">
      <div starkG2plotArea *ngIf="recordsAnalysisData" [options]="recordsAnalysisData"></div>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="8">
    <nz-card nzTitle="累计资产" [nzBordered]="false" class="mb-lg" [nzBodyStyle]="{ 'text-align': 'center' }">
      <g2-water-wave [title]="'累计结余'" *ngIf="water" [percent]="water.percent" [height]="161"></g2-water-wave>
      <div class="rank">
        <ul class="rank-list" *ngIf="water">
          <li>
            <span class="title">累计结余</span>
            <span class="value">{{ water.overview.surplus | _currency }}</span>
          </li>
          <li>
            <span class="title">累计支出</span>
            <span class="value">{{ water.overview.expense | _currency }}</span>
          </li>
          <li>
            <span class="title">累计收入</span>
            <span class="value">{{ water.overview.income | _currency }}</span>
          </li>
        </ul>
      </div>
    </nz-card>
  </div>
</div>

<div nz-row [nzGutter]="24">
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="16">
    <nz-card [nzLoading]="loading" nzTitle="本月支出分类" [nzBordered]="false" class="sales-card mb-0" style="min-height: 419px;">
      <g2-pie
        *ngIf="categoriesData"
        [data]="categoriesData"
        [hasLegend]="true"
        subTitle="总支出"
        [height]="248"
        [lineWidth]="4"
        [total]="categoriesTotal"
        [valueFormat]="handlePieValueFormat"
      >
      </g2-pie>
    </nz-card>
    <nz-card nzTitle="热门标签" [nzBordered]="false" class="my-card-body">
      <g2-tag-cloud [data]="tags" [height]="165" *ngIf="tags"></g2-tag-cloud>
    </nz-card>
  </div>

  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="8">
    <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="最近6笔支出" class="mb-0">
      <nz-list>
        <ng-container *ngFor="let item of lastRecords">
          <nz-list-item *ngFor="let record of item.records" [nzContent]="nzContent">
            <nz-list-item-meta [nzTitle]="nzTitle" [nzAvatar]="nzAvatar" [nzDescription]="nzDescription">
              <ng-template #nzTitle>
                <a>{{ record?.category?.name }}</a>
              </ng-template>
              <ng-template #nzAvatar>
                <div class="record-icon">
                  <i nz-icon nzIconfont="icon-{{ record.category?.icon_name }}" class="icon-sm"></i>
                </div>
              </ng-template>
              <ng-template #nzDescription>
                {{ record.date | _date: 'MM-dd HH:ii' }}
              </ng-template>
            </nz-list-item-meta>
            <ng-template #nzContent>
              <div class="width-sm">
                <p><nz-badge [nzColor]="record.account?.color" [nzText]="record.account?.name"></nz-badge></p>
                <p [ngClass]="record.direction === 'expense' ? 'text-red' : 'text-green'">
                  {{ record.direction === 'expense' ? '-' : '' }}
                  {{ record.currency_code }}
                  {{ record.currency_amount }}
                </p>
              </div>
            </ng-template>
          </nz-list-item>
        </ng-container>
      </nz-list>
    </nz-card>
  </div>
</div>

<div nz-row [nzGutter]="24">
  <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
    <nz-card nzTitle="余额最多的3个账号" [nzBordered]="false" class="my-card-body">
      <nz-list>
        <nz-list-item *ngFor="let item of accounts">
          <nz-list-item-meta [nzAvatar]="nzAvatar">
            <ng-template #nzAvatar>
              <div class="record-icon">
                <i nz-icon nzIconfont="icon-{{ item.type }}" class="icon-sm"></i>
              </div>
            </ng-template>
            <nz-list-item-meta-title>
              {{ item.name }}
            </nz-list-item-meta-title>
          </nz-list-item-meta>
          {{ item.balance | _currency }}
        </nz-list-item>
      </nz-list>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzSm="24" nzLg="12" class="mb-lg">
    <nz-card nzTitle="资产状况" [nzBordered]="false" class="my-card-body">
      <div class="text-center">
        <g2-gauge
          title="健康率"
          *ngIf="accountsOverview"
          height="164"
          [percent]="accountsOverview?.percent"
          [color]="accountsOverview?.color"
          bgColor="#f50"
        ></g2-gauge>
      </div>
    </nz-card>
  </div>
</div>
